<template>
  <view class="wrapper">
    <view class="photo-username">
      <view class="photo">
        <image src="@/static/logo.png"></image>
      </view>
      <view class="user">
        <view class="work-unit">{{ userInfo.deptName }}</view>
        <view class="name">{{ userInfo.name }}</view>
      </view>
    </view>
    <view class="space"></view>
    <view class="space"></view>
    <view><button type="default" @click="backToLogin">退出账号</button></view>
  </view>
</template>

<script setup>
import { ref } from "vue";
import { onShow } from "@dcloudio/uni-app";
import { HOST } from "../../static/js/const";

let userInfo = ref({
  name: "",
  deptName: "",
});

function backToLogin() {
  uni.showModal({
    content: "确定要退出登录吗？", // 对话框内容
    showCancel: true, // 是否显示取消按钮
    cancelText: "确定", // 取消按钮文本
    confirmText: "取消", // 确认按钮文本
    success: (res) => {
      console.log("uni.showModal");
      console.log(res);
      if (res.confirm) {
        console.log("用户点击了“取消”按钮");
      } else if (res.cancel) {
        uni.removeStorageSync("accessToken");
        uni.reLaunch({
          url: "/pages/login/index", // 这里的URL是登录页面的路径
        });
      }
    },
  });
}

onShow(() => {
  uni.request({
    url: `${HOST}/system/user/profile`,
    method: "GET",
    header: {
      "content-type": "application/json",
      Authorization: "Bearer " + uni.getStorageSync("accessToken"),
    },
    success: (res) => {
      if (Number(res.data.code) === 200) {
        userInfo.value.name = res.data.data.nickName;
        userInfo.value.deptName = res.data.data.dept.deptName;
      } else if (Number(res.data.code) === 401) {
        uni.showToast({
          title: "登录超时",
          icon: "error",
        });
        uni.removeStorageSync("accessToken");
        uni.reLaunch({
          url: "/pages/login/index", // 这里的URL是登录页面的路径
        });
      } else {
        uni.showToast({
          title: res.data.message,
          icon: "error",
        });
      }
    },
    fail: (err) => {
      console.error("请求失败", err);
      uni.showToast({
        title: "连接失败",
        icon: "error",
      });
    },
  });
});
</script>

<style lang="scss" scoped>
uni-button {
  font-size: $myuni-font-size-lg !important;
  color: #ff0000;
}

uni-button:after {
  border: none !important;
  font-size: $myuni-font-size-lg !important;
}

.photo-username {
  height: 150rpx;
  display: flex;
  // border-top: 1px solid $myuni-bg-color-grey!important;
  padding-top: $myuni-spacing-super-lg;
}

.photo {
  width: 150rpx;
  height: 150rpx;
  margin-right: $uni-spacing-col-lg;

  image {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 1px solid #fff;
  }
}

.user {
  flex: 1;
  height: 150rpx;
}

.work-unit {
  height: 50rpx;
  line-height: 50rpx;
  font-size: $myuni-font-size-base;
  // font-weight: bold;
  margin-top: $myuni-spacing-lg;
  color: $myuni-text-color-grey;
}

.name {
  height: 50rpx;
  line-height: 50rpx;
  font-size: $myuni-font-size-lg;
}
</style>
